import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 100,
    todos: [
      { name: "First work", done: true },
      { name: "Second work", done: false },
      { name: "Thrid work", done: false },
      { name: "Fourth work", done: true },
      { name: "Fifth work", done: false },
    ]
  },
  getters: {
    // state 会作为第一个参数
    doneTodos: (state) => {
      return state.todos.filter(todo => todo.done)
    },
    // getters 作为第二个参数
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    },
    // 更多参数是，通过方法返回
    doneTodosWithName: (state, getter) => {
      return (name) => {
        for (const todo of state.todos) {
          if (todo.name == name) {
            return todo.done;
          }
        }
      }
    } 
  },
  // 1、更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
  // 2、一条重要的原则就是要记住 mutation 必须是同步函数
  mutations: {
    increment(state) {
      state.count++
    },
    incrementSetp(state, setp) {
      state.count += setp
    },
    addObject(state, obj) {
      let number = this.getters.doneTodosCount
      console.log(number);
      Vue.set(state.todos, number, obj);
    }
  },

  // store.dispatch('increment')
  actions: {
    // 1、Action 提交的是 mutation，而不是直接变更状态。
    // 2、Action 可以包含任意异步操作。
    increment(context) {
      context.commit('increment')
    }
  }
})

export default store